<template>
  <div class="root">
    <div class="imgContainer">
      <img class="bgimg" :src="music.musicPic" alt="">
      <div class="newImg">
        <img :src="music.musicPic" alt="">  
      </div>    
    </div> 
    <aplayer class="player" autoplay="true" controls repeat="repeat-one"
    :music="{
        title: music.musicName,
        artist: music.singerName,
        src: music.musicSource,
        pic: music.musicPic,
        theme:music.musicPic
    }"
/>
  </div>
</template>

<script>
import aplayer from 'vue-aplayer'
export default {
  data(){
    return {
      id:this.$router.currentRoute.params.id,
      music:{}
    }
  },
  components:{
    aplayer
  },
  created() {
    this.getMusic()
  },
  methods:{
    async getMusic(){
      const res = await this.$http.post('/api/player', this.id)
      this.music = res.data[0]
      console.log(this.music)
    }
  }
}
</script>

<style lang="less" scoped>
  *{
      margin:0;
      padding: 0;
  }
  .root{
    width: 70vw;
    // height: 100vh;
    // background-color: skyblue;
    margin:0 auto;
    margin-top: 10px;
    .imgContainer{
      width: 100%;
      height: 760px;
      position: relative;
      .bgimg{
        width: 100%;
        height: 100%;
        filter: blur(10px)
      }
    }
  }
  .player{
    width: 100%;
    margin-top: 31px;
    // height: 100px;
  }
  .newImg{
    width: 350px;
    height: 350px;
    background-color: skyblue;
    position: absolute;
    border-radius: 50%;
    border: 3px solid #666;
    overflow: hidden;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    img{
      width: 100%;
      height: 100%;
      animation-name: trun;
      animation-duration: 10s;
      animation-iteration-count: infinite;
      animation-timing-function:linear;
    }
  }

  @keyframes trun{
    100%{
      transform: rotate(360deg);
    }
  }
</style>
